<!--
  组件名称：ChatWindow.vue
  功能描述：这个组件用于显示聊天框。
-->
<template>
  <div class="home">
    <div class="container">
      <el-row class="layout">
        <el-col :span="2">
          <div class="grid-content options">
            <div v-if="isOnline" class="network">
              <div></div>
              <div></div>
              <div></div>
            </div>
            <div v-else class="network-offline">
              <div></div>
              <div></div>
              <div></div>
            </div>
            <div class="avatar">
              <img :src="avatarUrl" />
              <div class="online-state"></div>
            </div>
            <div class="feature">
              <div class="option">
                <el-icon>
                  <Comment />
                </el-icon>
              </div>
              <div class="option">
                <el-icon>
                  <Avatar />
                </el-icon>
              </div>
              <div class="option">
                <el-icon>
                  <WalletFilled />
                </el-icon>
              </div>
              <div class="settings">
                <el-icon>
                  <Setting />
                </el-icon>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content friend-message">
            <div class="navigation">
              <div class="search">
                <el-input v-model="search" class="w-50 m-2" placeholder="" :prefix-icon="Search" />
              </div>
            </div>
            <div class="infiniteScroll" style="overflow: auto" v-infinite-scroll="loadFriendMessageScroll">
              <div class="friend" @click="resetUnreadMessagesCount(friend)" v-for="(friend, index) in friendsListInfo" :key="index">
                <div class="avatar-friend">
                  <img :src="friend.avatar" alt="" />
                </div>
                <div class="message">
                  <div class="nickname">
                    <div>{{ friend.nickname }}</div>
                    <div class="badge" v-if="friend.unreadMessagesCount > 0">{{ friend.unreadMessagesCount }}</div>
                  </div>
                  <div class="latest-news-notice">
                    {{ friend.latestNews }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content chats">
            <div class="top">
              <div class="nickname">
                {{ friendsInfo.nickname }}
              </div>
              <div class="status">
                <div class="state" :style="{ background: friendsInfo.status ? '#77fd59' : '#a8abb2' }"></div>
                <div class="online-or-offline">
                  {{ friendsInfo.status ? "在线" : "离线" }}
                </div>
              </div>
            </div>
            <div class="chat">
              <div class="infinite-scroll" v-infinite-scroll="loadFriendMessageScroll">
                <div v-for="(message, index) in friendsInfo.messages" :key="index">
                  <div class="left" v-if="message.type === 'friend'">
                    <div class="mes-avatar">
                      <img :src="friendsInfo.avatar" alt="" />
                    </div>
                    <div class="specific-message">
                      {{ message.message }}

                      <div class="triangle"></div>
                    </div>
                  </div>
                  <div class="right" v-else>
                    <div class="specific-message">
                      {{ message.message }}

                      <div class="triangle"></div>
                    </div>

                    <div class="mes-avatar">
                      <img :src="message.avatar" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bottom">
              <div class="left">
                <div class="emoji">
                  <i class="iconfont emoji-font">&#xe6d8;</i>
                </div>
                <div class="file">
                  <el-icon>
                    <FolderOpened />
                  </el-icon>
                </div>
              </div>
              <div class="middle">
                <el-input @keyup.enter="sendMessages" v-model="message" placeholder="留言" />
              </div>
              <div class="right" @click="sendMessages">
                <el-icon>
                  <Promotion />
                </el-icon>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  Comment,
  Avatar,
  WalletFilled,
  Setting,
  Search,
  FolderOpened,
  Promotion,
} from "@element-plus/icons-vue";
import { ref, reactive, toRefs, onMounted } from "vue";
import { useNetwork } from "@vueuse/core";
import { useUser } from "@/store/userChat";
import { storeToRefs } from "pinia";
import { useAuthStore } from "@/store/userInfo";
import type { Friend } from "@/types";
const userStore = useUser();
const authStore = useAuthStore();
const { friendsInfo, friendsListInfo } = storeToRefs(userStore);
const nickname = ref<string>(authStore.username);
const network = reactive(useNetwork());
const { isOnline } = toRefs(network);
const search = ref<string>("");
const message = ref<string>("");
let avatarUrl = ref<string>("");
const loadFriendMessageScroll = () => { };
const sendMessages = async () => {
  console.log("send messages = ", message.value);
  if (message.value) {
    console.log("send");
    if (await userStore.sendMessages(message.value)) {
      console.log("yes");
      message.value = "";
    }
  }
  console.log("friendsINfoMessages", friendsInfo);
};
const resetUnreadMessagesCount = (friend:Friend) => {
  friend.unreadMessagesCount = 0;
  friendsInfo.value = friend;
};
onMounted(() => {
  avatarUrl.value = authStore.avatarUrl;
  userStore.createWebSocket(nickname.value).catch(error => {
    console.error("WebSocket连接失败:", error);
  });
});
</script>

<style scoped lang="less">
@font-face {
  font-family: "iconfont";
  /* Project id 4410292 */
  src: url("//at.alicdn.com/t/c/font_4410292_0ufsd2u9fasp.woff2?t=1708158091409") format("woff2"),
    url("//at.alicdn.com/t/c/font_4410292_0ufsd2u9fasp.woff?t=1708158091409") format("woff"),
    url("//at.alicdn.com/t/c/font_4410292_0ufsd2u9fasp.ttf?t=1708158091409") format("truetype");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.chats {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  border-radius: 0 4px 4px 0;
  background-color: white;

  .top {
    display: flex;
    width: 100%;
    height: 10%;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    background-color: #f7fcff;
    border-radius: 0 4px 4px 0;

    .nickname {
      color: #000;
    }

    .status {
      display: flex;
      align-items: center;
      justify-content: center;

      .state {
        width: 10px;
        height: 10px;
        margin: 0 8px;
        background-color: #77fd59;
        border-radius: 50%;
      }
    }
  }

  .chat {
    display: flex;
    width: 100%;
    height: 80%;
    background-color: white;

    .infinite-scroll {
      width: 100%;
      height: 100%;
      overflow: auto;

      .left {
        position: relative;
        display: flex;
        margin-top: 10px;
        align-items: center;
        padding-left: 1rem;

        .mes-avatar {
          width: 32px;
          height: 32px;
          margin-right: 6px;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
          }
        }

        .specific-message {
          position: relative;
          display: flex;
          color: black;
          height: 24px;
          font-size: 14px;
          padding: 3px 8px;
          background-color: #fff;
          border-radius: 4px;
          align-items: center;
          justify-content: center;
          // margin-top: 10px;
          margin-left: 8px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);

          .triangle {
            position: absolute;
            border-right: 8px solid #fff;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            left: -6px;
            top: 6px;
          }
        }
      }

      .right {
        position: relative;
        display: flex;
        margin-top: 10px;
        align-items: center;
        padding-right: 1.5rem;
        justify-content: flex-end;

        .mes-avatar {
          width: 32px;
          height: 32px;
          margin-right: 8px;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
          }
        }

        .specific-message {
          position: relative;
          display: flex;
          color: black;
          height: 24px;
          font-size: 14px;
          padding: 3px 8px;
          background-color: #fff;
          border-radius: 4px;
          align-items: center;
          justify-content: center;
          // margin-top: 10px;
          margin-right: 8px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);

          .triangle {
            position: absolute;
            border-left: 8px solid #fff;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            right: -6px;
            top: 6px;
          }
        }
      }
    }
  }

  .bottom {
    display: flex;
    width: 100%;
    height: 10%;
    font-size: 14px;
    align-items: center;
    justify-content: space-evenly;
    background-color: #f7fcff;
    border-radius: 0 0 4px 0;

    .left {
      display: flex;
      align-items: center;
      justify-content: center;

      .emoji {
        width: 1rem;
        height: 1rem;
        cursor: pointer;
        margin-right: 12px;
        display: flex;
        align-items: center;
        justify-content: center;

        .emoji-font {
          color: #a9acaf;
          cursor: pointer;
          font-size: 19px;
          font-weight: 400;
        }
      }

      .file {
        display: flex;
        color: #a9acaf;
        cursor: pointer;
        font-size: 19px;
        font-weight: 400;
        align-items: center;
        justify-content: center;
      }
    }

    .middle {
      width: 80%;

      :deep(.el-input__inner) {
        color: black;
        font-weight: 200;
        font-size: 0.8rem;
      }
    }

    .right {
      display: flex;
      color: #a9acaf;
      cursor: pointer;
      font-size: 21px;
      font-weight: 400;
      align-items: center;
      justify-items: center;
      margin-right: 1rem;

      &:hover {
        color: #409eff;
      }
    }
  }
}

.friend-message {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  background-color: #ccffff !important;

  .navigation {
    display: flex;
    width: 100%;
    height: 2.5rem;
    justify-content: center;
    background-color: #e5edf3;
    align-items: center;

    .search {
      :deep(.el-input__inner) {
        color: white;
      }

      :deep(.el-input__wrapper) {
        background-color: white;
        border-radius: 1rem;
      }
    }
  }

  .infiniteScroll {
    width: 100%;
    height: 100%;
    color: black;

    .friend {
      display: flex;
      height: 60px;
      margin-top: 0.1rem;

      &:hover {
        background-color: #444c56;
      }

      cursor: pointer;
      align-items: center;
      justify-content: space-evenly;

      .avatar-friend {
        width: 2rem;
        height: 2rem;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 50%;
        }
      }

      .message {
        display: flex;
        width: 14rem;
        text-align: left;
        flex-direction: column;

        .nickname {
          display: flex;
          font-size: 12px;
          justify-content: space-between;

          .badge {
            margin-left: 0.5rem;
            display: flex;
            color: white;
            width: 0.9rem;
            height: 0.9rem;
            font-size: 7px;
            background-color: red;
            border-radius: 50%;
            align-items: center;
            text-align: center;
            justify-content: center;
          }
        }

        .latest-news-notice {
          margin-top: 0.2rem;
          width: 210px;
          color: #a6afc2;
          font-size: 9px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
  }
}

.home {
  display: flex;
  width: 100%;
  height: 100%;

  align-items: center;
  justify-content: center;
  background-color: #ecefff;
}

.container {
  width: 100%;
  height: 100%;
}

.layout {
  height: 100%;
  width: 100%;

  .grid-content {
    height: 100%;
    background-color: #99ccff;
  }

  .options {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
    border-radius: 4px 0 0 4px;
  }

  .network {
    display: flex;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    justify-content: space-evenly;

    div {
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
    }

    >div:nth-child(1) {
      background-color: red;
    }

    >div:nth-child(2) {
      background-color: yellow;
    }

    >div:nth-child(3) {
      background-color: green;
    }
  }

  .avatar {
    position: relative;
    width: 3rem;
    height: 3rem;
    margin-bottom: 10px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    .online-state {
      position: absolute;
      width: 0.7rem;
      height: 0.7rem;
      right: 0rem;
      bottom: 0rem;
      background-color: yellowgreen;
      border-radius: 50%;
    }
  }

  .feature {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    color: #a6b6c3;

    .option {
      display: flex;
      height: 2rem;
      font-size: 1.4rem;
      color: grey;
      cursor: pointer;
      align-items: center;
      justify-content: center;
    }

    .option:hover,
    .option:nth-child(1) {
      color: #ffffff;
      background-color: #8998a9;
      border-left: 2px solid #40c4b2;
    }

    .settings {
      position: absolute;
      width: 100%;
      display: flex;
      cursor: pointer;
      height: 2rem;
      font-size: 1.4rem;
      color: grey;
      align-items: center;
      justify-content: center;
      bottom: 2rem;

      &:hover {
        color: white;
      }
    }
  }
}
</style>
